<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
            </style>
    </head>

    <body>
        <div id="main" style="width: 100%;height:100%;"></div>
        <script src="../components/echarts-4.0.4.min.js"></script>
        <script>
            var pieChart = echarts.init(document.getElementById('main'));
            var	data=[
                {value:159, name:'轻工/纺织'},
                {value:457, name:'石油/石化'},
                {value:316, name:'地质/矿产'},
                {value:513, name:'钢铁/有色金属'},
                {value:34, name:'橡胶/塑料'},
                {value:157, name:'机械制造'},
                {value:791, name:'地质勘探'},
                {value:185, name:'农/林/牧'},
                {value:167, name:'食品/烟草'},
                {value:219, name:'矿业/冶金'},
                {value:418, name:'化工/化纤'},
                {value:9, name:'非金属/珠宝'},
                {value:112, name:'通信/邮政'},
                {value:318, name:'医疗/卫生'},
                {value:212, name:'电子/信息技术'}
            ];
            var pieOption = {
                title: {
                    text: '2017年政策受理行业情况',
                    left: 'center',
                    top: "15%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
               /* tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },*/
                // color: ['#7a8be4', '#42a4eb' ,"#a34018",'#f36f8a','#fd9173','#4ac7f5'],
                color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b'],
                legend: { //图例组件，颜色和名字
                    left: '10%',
                    top: '25%',
                    orient: 'vertical',
                    itemGap: 12, //图例每项之间的间隔
                    itemWidth: 10,
                    itemHeight: 10,
                    height: '70%',
                    icon: 'rect',
                    data: ['轻工/纺织','石油/石化','地质/矿产','钢铁/有色金属','水文气象','橡胶/塑料','机械制造','地质勘探','农/林/牧','食品/烟草','矿业/冶金','化工/化纤','非金属/珠宝','通信/邮政','医疗/卫生','电子/信息技术'],
                    textStyle: {
                        color: '#FFF',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 16
                    }
                },
                series: [{
                    name: '违规次数',
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 5, //最小的扇区角度（0 ~ 360）
                    radius : '50%',
                    center: ['65%', '60%'], //饼图的中心（圆心）坐标
                    avoidLabelOverlap: true, ////是否启用防止标签重叠
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    label: { //标签的位置
                        normal: {
                            show: false,
                            position: 'inside', //标签的位置
                            formatter: "{c}",
                            textStyle: {
                                color: '#fff'
                            }
                        }/*,
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontWeight: 'bold'
                            }
                        }*/
                    },
                    data: data
                }]
            };

            var currentIndex = -1;
            var timer1 = setInterval(function () {
                var dataLen = pieOption.series[0].data.length;
                // 取消之前高亮的图形
                pieChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                pieChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 1000);
            pieChart.setOption(pieOption);
        </script>
    </body>
</html>
